import React, { useState } from 'react'
import { Form, Input, Select } from 'antd'
const { Option } = Select;

const UserForm = (props) => {

    return (
        <Form
            form={props.form}
            layout="vertical"
            name="form_in_modal"
            initialValues={{
                modifier: 'public',
            }}
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[
                    {
                        required: true,
                        message: 'Please input the username of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item

                name="password"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: 'Please input the password of collection!',
                    },
                ]}
            >
                <Input type="password" />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={props.isDisabled ? [] : [
                    {
                        required: true,
                        message: 'Please input the region of collection!',
                    },
                ]
                }
            >
                <Select placeholder="select your region" disabled={props.isDisabled}>
                    {
                        props.regionList.map(item => <Option value={item.value} key={item.id} >{item.title}</Option>)
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[
                    {
                        required: true,
                        message: 'Please input the role of collection!',
                    },
                ]}
            >
                <Select placeholder="select your role" onChange={(value) => {
                    if (value === 1) {
                       
                        props.setisDisabled(true)
                        props.form.setFieldValue("region", "") //roleId===1时，设置区域=""
                    } else (
                        props.setisDisabled(false)
                    )

                }}>
                    {
                        props.roleList.map(item => <Option value={item.id} key={item.id}>{item.roleName}</Option>)
                    }
                </Select>
            </Form.Item>
        </Form>
    )
}

export default UserForm